import 'package:flutter/material.dart';

class CompoentsDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        title: Text("Compoents Demo"),
      ),
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // CheckBoxDemo(),
                // RadioDemo(),
                // SwitchDemo(),
                SliderDemo(),
              ],
            ),
            // CheckBoxListTileDemo(),
            // RadioListTileDemo(),
            // SwitchListTileDemo(),
          ],
        ),
      ),
    ));
  }
}

// 复选框
class CheckBoxDemo extends StatefulWidget {
  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}

class _CheckBoxDemoState extends State<CheckBoxDemo> {
  bool _checkBoxItemA = true;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: _checkBoxItemA,
      onChanged: (bool value) {
        setState(() {
          _checkBoxItemA = value;
        });
      },
      // activeColor: Colors.white,
      // checkColor: Colors.pink,
    );
  }
}

// 带图标、文本的复选框
class CheckBoxListTileDemo extends StatefulWidget {
  @override
  _CheckBoxListTileDemoState createState() => _CheckBoxListTileDemoState();
}

class _CheckBoxListTileDemoState extends State<CheckBoxListTileDemo> {
  bool _checkBoxListTileItemA = true;

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: _checkBoxListTileItemA,
      onChanged: (bool value) {
        setState(() {
          _checkBoxListTileItemA = value;
        });
      },
      title: Text("CheckBoxListTile"),
      subtitle: Text("This is ChexkBoxListTile"),
      secondary: Icon(Icons.bookmark),
      selected: _checkBoxListTileItemA,
      // activeColor: Colors.black,
      // checkColor: Colors.pink,
      contentPadding: EdgeInsets.all(20.0),
    );
  }
}

// 单选框
class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  String _groupValue = '男';

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Radio(
          value: '女',
          groupValue: _groupValue,
          onChanged: (String value) {
            setState(() {
              _groupValue = value;
            });
          },
          activeColor: Colors.black,
        ),
        Radio(
          value: '男',
          groupValue: _groupValue,
          onChanged: (String value) {
            setState(() {
              _groupValue = value;
            });
          },
          activeColor: Colors.black,
        ),
      ],
    );
  }
}

// 带图标、文本的单选框
class RadioListTileDemo extends StatefulWidget {
  @override
  _RadioListTileDemoState createState() => _RadioListTileDemoState();
}

class _RadioListTileDemoState extends State<RadioListTileDemo> {
  String _groupValue = '男';

  void _groupValueChange(String value) {
    setState(() {
      _groupValue = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RadioListTile(
          value: '男',
          groupValue: _groupValue,
          onChanged: _groupValueChange,
          title: Text("男"),
          subtitle: Text("这是男生"),
          secondary: Icon(Icons.filter_1),
          selected: _groupValue == '男',
        ),
        RadioListTile(
          value: '女',
          groupValue: _groupValue,
          onChanged: _groupValueChange,
          title: Text("女"),
          subtitle: Text("这是女生"),
          secondary: Icon(Icons.filter_1),
          selected: _groupValue == '女',
        ),
      ],
    );
  }
}

// Switch 开关
class SwitchDemo extends StatefulWidget {
  @override
  _SwitchDemoState createState() => _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
  bool _switchItemA = false;

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: _switchItemA,
      onChanged: (bool value) {
        setState(() {
          _switchItemA = value;
        });
      },
      activeColor: Colors.pink,
    );
  }
}

// 带图标、文本的开关
class SwitchListTileDemo extends StatefulWidget {
  @override
  _SwitchListTileDemoState createState() => _SwitchListTileDemoState();
}

class _SwitchListTileDemoState extends State<SwitchListTileDemo> {
  bool _switchListTileItem = false;
  @override
  Widget build(BuildContext context) {
    return SwitchListTile(
      value: _switchListTileItem,
      onChanged: (bool value) {
        setState(() {
          _switchListTileItem = value;
        });
      },
      title: Text("Switch 主标题"),
      subtitle: Text("Switch 副标题"),
      secondary: Icon(Icons.bookmark),
      selected: _switchListTileItem,
    );
  }
}

// 滑动模块
class SliderDemo extends StatefulWidget {
  @override
  _SliderDemoState createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _initVal = 0.3;
  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _initVal,
      onChanged: (double value) {
        // _initVal = value;
      },
      activeColor: Colors.red,
      inactiveColor: Colors.green,
      min: 0.0,
      max: 10.0,
      divisions: 10,
    );
  }
}
